<template>
	<el-tabs type="border-card" v-model="activeName" class="demo-tabs" @tab-click="handleClick">
		<el-tab-pane label="本周热门" name="first">还没有</el-tab-pane>
		<el-tab-pane label="本周更新" name="second">也没有</el-tab-pane>
		<el-tab-pane label="学习说明" name="third">坚持</el-tab-pane>
		<el-tab-pane label="关于本店" name="fourth">
			联系我们创建自己的小店。联系方式:xxxx-xxxx
			<el-row>
				<el-button @click="showQr()" type="primary" size="large">查看联系方式</el-button>
			</el-row>
			<qr-code-vue v-show="qrcode" :value="qrtext" size:300> </qr-code-vue>
		</el-tab-pane>
	</el-tabs>
</template>
<script lang="ts" setup>
	import { ref } from 'vue'
	import type { TabsPaneContext } from 'element-plus'
	import { ElMessage } from 'element-plus'
	import 'element-plus/theme-chalk/el-message.css'
	import QrCodeVue from 'qrcode.vue'
	const activeName = ref('first')
	var qrcode = ref(false)
	const qrtext = ref("http://www.qhyiyun.club");
	const handleClick = (tab : TabsPaneContext, event : Event) => {
		console.log(tab, event)
	}

	const openVn = () => {
		ElMessage('这里不能抽奖哦')
	}
	setTimeout(openVn, 400);
	const showQr = function () {
		console.log(qrcode.value);
		if (qrcode.value) {
			qrcode.value = false;
		} else {
			qrcode.value = true;
		}
	}
</script>
<style>
	.demo-tabs>.el-tabs__content {
		padding: 32px;
		color: #6b778c;
		font-size: 32px;
		font-weight: 600;
	}

	.qr-code {
		display: none;
	}
</style>